<template>
  <div class="container">
    <Mall title="书籍">
      <!-- 作用域插槽必须使用 template -->
      <template scope="four">
        <ul>
          <li v-for="(b, index) in four.books" :key="index">{{ b }}</li>
        </ul>
      </template>
    </Mall>

    <Mall title="书籍">
      <!-- 作用域插槽必须使用 template -->
      <!-- 使用 scope 或者 slot-scope 都可以 -->
      <template slot-scope="{ books }">
        <ul>
          <li style="color: red" v-for="(b, index) in books" :key="index">
            {{ b }}
          </li>
        </ul>
      </template>
    </Mall>
  </div>
</template>

<script>
import Mall from "./components/Mall";
export default {
  name: "App",
  components: { Mall },
};
</script>

<style scoped>
.container,
.bottom {
  display: flex;
  justify-content: space-around;
}
</style>